<!-- 提货专区商品列表 -->
<template>
	<view class="container">
		<view class="navBar">
			<text class="yticon icon-zuo" @tap="back"></text>
			<view class="search">
				<icon class="searchIcon" type="search" :size='20' color='#999'></icon>
				<input class="searchInp" type="text" confirm-type="search" v-model="keyword" placeholder="请输入商品名称" @confirm="search" />
			</view>
			<view class="cart" @tap="navTo('/mall/pickCardMall/pickCardCart')">
				<image class="cartIcon" src="../static/images/tubiao.png" mode=""></image>
			</view>
		</view>
		<view class="nav">
			<view class="navItem" v-for="(item,index) in menu" :key="index" :class="{'on':showPage==index}" @tap="togglePage(index)">
				<text class="name">{{item.name}}</text>
				<text v-if="index == 2" class="iconfont triangle" :style="'transform:rotate('+triangleDeg+'deg);'"></text>
			</view>
		</view>
		<view class="listBox">
			<empty v-if="empty" :custom="true" src="/mall/static/images/no-goods.png" text="无相关商品"></empty>
			<goods-block :goodsList="goodsList" :pick="true" :scrollTop="scrollTop"></goods-block>
			<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty/empty"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import goodsBlock from "@/components/goodsBlock/goodsBlock.vue"
	import {
		takeCategory,
		takeProducts
	} from "@/api/mall.js"
	export default {
		components: {
			uniLoadMore,
			goodsBlock,
			empty
		},
		data() {
			return {
				empty: false,
				menu: [
					{name:"综合排序"},
					{name:"销量"},
					{name:"价格"},
					{name:"智能排序"}
				],
				showPage: 0,
				triangleDeg: 0,
				is_good: 1,
				sales: 0,
				price: "",
				choice: 0,
				item: {},
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				keyword: '',
				cid: "",
				page: 1,
				limit: 10,
				goodsList: [],
				scrollTop: 0
			}
		},
		onLoad(option) {
			if (option.id) {
				this.cid = option.id
			}
			if (option.keyword) {
				this.keyword = option.keyword
			}
			this.loadData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//加载更多
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.loadData();
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			loadData() {
				takeProducts({
					page: this.page,
					limit: this.limit,
					keyword: this.keyword,
					cid: this.cid,
					is_good: this.is_good,
					sales: this.sales,
					price:this.price,
					choice: this.choice
				}).then(res => {
					this.loadStatus = "more";
					this.goodsList.push.apply(this.goodsList, res.data.goodsList);
					if (res.data.goodsList.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.goodsList.length == 0) {
						this.empty = true
						this.contentText.contentnomore = ''
					}
				})
			},
			search() {
				this.page = 1
				this.loadStatus = "loading"
				this.goodsList = []
				this.empty = false
				this.loadData()
			},
			togglePage(index) {
				this.showPage = index
				this.showPage == 0?this.is_good = 1:this.is_good = 0
				this.showPage == 1?this.sales = 1:this.sales = 0
				if(this.showPage == 2) {
					if(this.price == "" ||this.price =="desc") {
						this.price = "asc"
						this.triangleDeg = 180
					} else if (this.price == "asc") {
						this.price = "desc"
						this.triangleDeg = 0
					}
				} else {
					this.price = ""
					this.triangleDeg = 0
				}
				this.showPage == 3?this.choice = 1:this.choice = 0
				this.page = 1
				this.loadStatus = "loading"
				this.goodsList = []
				this.empty = false
				this.loadData()
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.navBar {
			position: sticky;
			top: 0;
			z-index: 9;
			display: flex;
			justify-content: space-between;
			// #ifdef H5
			padding: 30rpx 20rpx;
			// #endif
			// #ifdef APP-PLUS
			padding: calc(var(--status-bar-height) + 30rpx) 20rpx 30rpx;
			// #endif
			background: linear-gradient(90deg, #DFCF93 0%, #F2E9C7 100%);

			.yticon {
				font-size: 36rpx;
				font-weight: bold;
				width: 72rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				margin-right: 10rpx;
			}

			.search {
				position: relative;
				flex: 1;

				.searchIcon {
					position: absolute;
					left: 20rpx;
					top: 18rpx;
				}

				.searchInp {
					width: 100%;
					height: 72rpx;
					padding-left: 80rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					background: #FAF9F3;
					border-radius: 36rpx;
				}
			}

			.cart {
				margin-top: 11rpx;
				margin-left: 30rpx;

				.cartIcon {
					width: 58rpx;
					height: 50rpx;
				}
			}
		}
		.nav {
			position: sticky;
			// #ifdef H5
			top: 132rpx;
			// #endif
			// #ifdef APP-PLUS
			top: calc(var(--status-bar-height) + 132rpx);
			// #endif
			z-index: 9;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border-bottom: solid 1rpx #fafafa;
			background-color: #ffffff;
			display: flex;
			.navItem {
				width: 25%;
				font-size: 28rpx;
				color: #757575;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				transition: color .2s linear;
				.iconfont {
					width: 28rpx;
					height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: transform .2s linear, color .2s linear;
				}
				&.on {
					color: #333;
					font-weight: bold;
					.iconfont {
						color: #333;
					}
				}
			}
		}
		.listBox {
			padding: 20rpx 30rpx 0;
		}
	}
	/* 字体图标 */
	@font-face {
		font-family: "HM-FD-font";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
	}
	.iconfont {
		font-family: "HM-FD-font" !important;
		font-size: 13px;
		font-style: normal;
		color: #757575;
		&.triangle {
			&:before {
				content: "\e65a";
			}
		}
	}
</style>
